<template>
  <el-dialog title="中转详情" :visible.sync="visible" width="1000px">
    <div class="add-form">
      <el-form ref="form" label-width="120px">
        <el-form-item label="司机">
          <span class="fw-bold">{{ transferData.userName }}</span>
        </el-form-item>
        <el-form-item label="路线">
          <span class="fw-bold">
            {{
              transferData.transferCakeInfos && 
              Array.from(new Set(transferData.transferCakeInfos.map(item => item.warehouseName))).join('，')
            }}
          </span>
        </el-form-item>
        <el-form-item label="状态">
          <el-tag size="small" :type="statusStyleMap[transferData.status]">
            {{ statusLabelMap[transferData.status] }}
          </el-tag>
        </el-form-item>
        <el-form-item label="出发时间">
          <span class="fw-bold">{{ transferData.startTime || '-'}}</span>
        </el-form-item>
        <el-form-item label="完成时间">
          <span class="fw-bold">{{ transferData.finishTime || '-'}}</span>
        </el-form-item>
        <el-form-item label="蛋糕详情">
          <div v-if="transferData.transferCakeInfos">
            <el-card class="w-320 d-ib mr-20 mb-10 lh-24" v-for="item in transferData.transferCakeInfos" :key="item.id">
              <div slot="header" class="d-f jc-sb ai-c">
                <span>{{ item.goodsName }} （{{ item.xmbzNo }}）</span>
                <el-tag size="small" :type="statusStyleMap[item.status]">
                  {{ statusLabelMap[item.status] }}
                </el-tag>
              </div>
              <div>
                <span class="ta-r mr-10 d-ib w-120">送往仓库：</span>
                <span class="fw-bold">{{ item.warehouseName || '-' }}</span>
              </div>
              <div>
                <span class="ta-r mr-10 d-ib w-120">出库时间：</span>
                <span class="fw-bold">{{ item.outboundTime }}</span>
              </div>
              <div>
                <span class="ta-r mr-10 d-ib w-120">出发时间：</span>
                <span class="fw-bold">{{ item.startTime || '-' }}</span>
              </div>
              <div>
                <span class="ta-r mr-10 d-ib w-120">完成时间：</span>
                <span class="fw-bold">{{ item.finishTime || '-' }}</span>
              </div>
            </el-card>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    const statusStyleMap = {
      1: 'info',
      2: 'primary',
      3: 'success',
    }
    const statusLabelMap = {
      1: '已出库',
      2: '中转中',
      3: '完成',
    }
    return {
      statusStyleMap,
      statusLabelMap,
      visible: false,
      transferData: {}
    }
  },
  methods: {
    show({ data }) {
      this.visible = true
      this.transferData = data || {}
    },
  },
}
</script>

<style lang="scss" scoped>
.cake-item {
  border: 1px solid #ddd;
}
</style>
